<template>
  <div id="container">
    <el-row class="Title">
      <el-col :span="14">
        <el-form
          label-position="left"
          label-width="80px"
          :inline="true"
          :model="formInline"
          size="medium"
          ref="search"
        >
          <el-form-item label="工单编号:">
            <el-input v-model="formInline.taskCode" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="工单状态:" style="margin-left: 10px">
            <el-select v-model="formInline.statusList.statusName" placeholder="请选择"
            @change="changFn">
              <el-option
              v-for="item in formInline.statusList"
              :label="item.statusName" :value="item.statusId"
              :key="item.statusId" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="onSubmit"
              icon="el-icon-search"
              size="medium"
              style="width: 80px"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
      <el-col></el-col>
    </el-row>
    <div class="Table">
      <el-row type="flex" justify="start">
        <el-button
          type="primary"
          class="TableBtn"
          icon="el-icon-circle-plus-outline"
          @click="addFn"
          :searchStaus='searchStaus'
          >新建</el-button
        >
      </el-row>
      <!-- 表格 -->
      <TableDialogVue @changePage='getWorkList' :list='DialogList' :decs='decs'/>
    </div>
     <!-- 新增弹窗 -->
    <addDialogVue :dialogVisible.sync='addDialogShow'  />

  </div>
</template>

<script>
import { getWorkOrderList, getWorkStatus } from '@/api/workorder'
import TableDialogVue from './components/TableDialog.vue'
import addDialogVue from './components/addDialog.vue'

export default {
  components: { TableDialogVue, addDialogVue },
  data () {
    return {
      formInline: {
        taskCode: '',
        statusList: [],
        status: ''
      },
      // 列表接口数据
      pageParams: {
        pageSize: 10,
        isRepair: true
      },
      DialogList: [],
      decs: [],
      addDialogShow: false,
      pageIndex: null,
      searchStaus: true,
      detailDialogVisible: false
    }
  },
  created () {
    this.pageIndex = 1
    this.getWorkList()
    this.getStatus()
  },
  methods: {
    async onSubmit () {
      // console.log(this.formInline)
      console.log(this.pageIndex)
      const res = await getWorkOrderList({
        ...this.pageParams,
        pageIndex: this.pageIndex,
        taskCode: this.formInline.taskCode,
        status: this.formInline.status
      })
      this.DialogList = res.currentPageRecords
      this.decs = res

      this.$refs.search.resetFields()
    },
    async getWorkList (val) {
      this.pageIndex = val
      const res = await getWorkOrderList({ ...this.pageParams, pageIndex: val })
      console.log(res.currentPageRecords)
      this.DialogList = res.currentPageRecords
      this.decs = res
    },
    addFn () {
      this.addDialogShow = true
    },
    async getStatus () {
      const res = await getWorkStatus()
      console.log(res)
      this.formInline.statusList = res
    },
    changFn (val) {
      this.formInline.status = val
      console.log(val)
    }
  }
}
</script>

<style lang="less" scoped>
// * {
//   background-color: #f8fafe;
// }
#container {
  box-sizing: border-box;
  width: 1273px;
  height: 100vh;
  padding: 20px;
background-color: #f8fafe !important;
  .Title {
    text-align: left;
    box-sizing: border-box;
    width: 100%;
    height: 64px;
    background-color: #fff;
    padding-left: 17px;
    line-height: 64px;
    /deep/.el-button {
    margin-top: 15px;
    margin-left: 10px;
    margin-bottom: 20px;
    width: 80px;
    padding-left: 14px;
    // text-align: center;
    background-color: #6783f7;

}
    /deep/.el-form-item,
    .el-form {
      background-color: #fff;
      box-sizing: border-box;
      padding: 0;
      margin: 0;
      height: 36px;
    }
   /deep/ .el-input--medium .el-input__inner {
    height: 36px;
    line-height: 36px;
    margin-top: 15px;
    background-color: #fff;

}
/deep/ .el-input--medium {
    font-size: 14px;
    background-color: #fff;
}
/deep/ l-select .el-input .el-select__caret {
    color: #C0C4CC;
    font-size: 14px;
    transition: transform .3s;
    transform: rotateZ(180deg);
    cursor: pointer;
    margin-top: 7px;
}
/deep/.el-input--medium .el-input__icon {
    line-height: 36px;
    margin-top: 7px;
}
  }
  .Table {
    box-sizing: border-box;
    margin-top: 20px;
    width: 100%;
    height: 658px;
    background-color: #fff;
    padding: 20px 15px 19px 17px;
    .TableBtn {
        font-size: 14px;
        margin-bottom: 20px;
    width: 80px;
    height: 36px;
    // line-height: 36px;
    color: #fff;
    padding-left: 14px;
    padding-top: 10px;
    margin-left: 0;
    background: linear-gradient(135deg, #ff7d43, #ff5e20) !important;
    border: none;
    /deep/.el-icon-circle-plus-outline {
        font-size: 18px;
        vertical-align: middle;
    }
}
    }
  }

</style>
